<template>
    <div>
        <Modal :title="modalTitle" v-model="modalShow" :width="modalWidth" :mask-closable="false" :closable="false">
            <div v-show="modalType === 'edit' || modalType === 'add'">
                <Form ref="formItem" label-position="right" :model="formItem" :label-width="130">
                    <Input type="text" v-model="formItem.original_url" placeholder="请输入接口地址" style="width: 85%"
                           clearable></Input>
                    <Button class="search-btn" type="success" @click="searchUrl">
                        <Icon type="ios-search"/>
                        查询
                    </Button>
                    <Alert style="width: 98%;margin-top: 5px">【1.不输入表头名称，不会导出此字段】【2.点击可以拖拽排序】【3.传递参数,fileName可以自定导出名字】【4.url真实调用的时候不会传递任何参数，参数都是调用下载地址的时候传递过去的】</Alert>

                    <Row :gutter="3" class="Header">
                        <vuedraggable class="wrapper" v-model="heardList">
                            <transition-group>
                                <Col span="4" v-for="(item,index) in heardList" :key="index" class="field-box">
                                    <Card class="field-box-card">
                                        <div style="text-align:center">
                                            <span>{{item.field}}</span>
                                        </div>
                                    </Card>
                                    <Input class="field-box-input" type="text" v-model="item.name" placeholder="输入对应表头" clearable></Input>
                                </Col>
                            </transition-group>
                        </vuedraggable>
                    </Row>

                    <FormItem label="导出Excel标题：" prop="title" style="margin-top: 40px">
                        <Input type="text" v-model="formItem.title" placeholder="请输入标题" clearable></Input>
                    </FormItem>
                    <FormItem label="备注：" prop="remarks" style="margin-top: 40px">
                        <Input type="text" v-model="formItem.remarks" placeholder="请输入备注" clearable></Input>
                    </FormItem>
                    <FormItem label="第几行渲染：" prop="show_num" style="margin-top: 40px">
                        <Input type="text" v-model="formItem.show_num" placeholder="从第几行显示数据" clearable></Input>
                    </FormItem>
                    <!--                    <FormItem label="状态：" prop="state" style="margin-top: 40px">-->
                    <!--                        <Input type="text" v-model="formItem.state" placeholder="请输入状态" clearable></Input>-->
                    <!--                    </FormItem>-->
                </Form>
                <Divider />
                <Form ref="formDynamic" :model="formDynamic" style="width: 100%">
                    <FormItem
                            v-for="(item, index) in formDynamic.items"
                            v-show="item.status"
                            :key="index">
                        <Row>
                            <Col span="6">
                                <Input type="text" v-model="item.poi" placeholder="输入坐标,如：A1:B1"></Input>
                            </Col>
                            <Col span="6">
                                <Input type="text" v-model="item.title" placeholder="输入标题"></Input>
                            </Col>
                            <Col span="6">
                                <Input type="text" v-model="item.size" placeholder="输入字体大小,如：18"></Input>
                            </Col>
                            <Col span="6">
                                <Input type="text" v-model="item.color" placeholder="输入颜色,如：ED4014"></Input>
                            </Col>
                            <Col span="6">
                                <Select v-model="item.fontWeight" placeholder="是否加粗">
                                    <Option value="1">是</Option>
                                    <Option value="2">否</Option>
                                </Select>
                            </Col>
                            <Col span="6">
                                <Select v-model="item.hb" placeholder="是否合并单元格">
                                    <Option value="1">是</Option>
                                    <Option value="2">否</Option>
                                </Select>
                            </Col>
                            <Col span="6">
                                <Input type="text" v-model="item.width" placeholder="输入列宽"></Input>
                            </Col>
                            <Col span="6">
                                <Input type="text" v-model="item.height" placeholder="输入行高"></Input>
                            </Col>
                            <Col span="1">
                                <Button @click="handleRemove(index)"><Icon type="md-close" /></Button>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem>
                        <Row>
                            <Col span="12">
                                <Button type="dashed" long @click="handleAdd" icon="md-add">设置Excel表头</Button>
                            </Col>
                        </Row>
                    </FormItem>
                </Form>
            </div>
            <div v-show="modalType === 'info'">
                <Form :model="formItem" :label-width="150">
                    <FormItem label="标题：">
                        {{formItem.title}}
                    </FormItem>
                    <FormItem label="表头：">
                        {{formItem.fiels_josn}}
                    </FormItem>
                    <FormItem label="原始Url：">
                        {{formItem.original_url}}
                    </FormItem>
                    <FormItem label="下载Url：">
                        {{formItem.down_url}}?id={{formItem.id}}
                    </FormItem>
                    <FormItem label="创建机构：">
                        {{formItem.company_code}}
                    </FormItem>
                    <FormItem label="备注：">
                        {{formItem.remarks}}
                    </FormItem>
                    <!--                    <FormItem label="状态：">-->
                    <!--                        {{formItem.state}}-->
                    <!--                    </FormItem>-->
                </Form>
            </div>
            <div slot="footer">
                <template v-if="modalType === 'edit' || modalType === 'add'">
                    <Button type="text" @click="cancelOption">取消</Button>
                    <Button type="success" @click="saveOption" :loading="btnLoading">保存</Button>
                </template>
                <template v-if="modalType === 'info'">
                    <Button type="text" @click="cancelOption">关闭</Button>
                </template>
            </div>
        </Modal>
    </div>
</template>

<script>
import { getUrl, operationCommonExcel } from '@/api/swoole'
import vuedraggable from 'vuedraggable'

export default {
  name: 'optionModal',
  components: { vuedraggable },
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    modalType: {
      type: String,
      default: () => {
        return 'info'
      }
    },
    modalShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 800
      }
    },
    dataObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      index: 1,
      formDynamic: {
        items: []
      },
      heardList: [],
      btnLoading: false,
      formItem: {
        show_num: '1'
      },
      categoryObj: {}
    }
  },
  methods: {
    handleAdd () {
      this.index++
      this.formDynamic.items.push({
        poi: '',
        title: '',
        size: '',
        color: '',
        fontWeight: '',
        width: '',
        height: '',
        hb: '',
        index: this.index,
        status: 1
      })
    },
    handleRemove (index) {
      this.formDynamic.items[index].status = 0
    },
    searchUrl () {
      getUrl(this.formItem.original_url).then(ret => {
        let data = ret.data
        if (data.errcode === 0 || data.errcode === 200) {
          let result = data.data
          let newHeardList = []
          this.$common.xeUtils.objectEach(result[0], (item, index) => {
            let obj = { field: index, name: '' }
            let num = this.$common.xeUtils.findKey(this.heardList, item => item.field == index)
            if (num > -1) {
              obj.name = this.heardList[num].name
            }
            newHeardList.push(obj)
          })
          this.heardList = newHeardList
          this.success()
        } else {
          this.error(data)
        }
      })
    },
    cancelOption () {
      this.formDynamic.items = []
      this.$emit('cancelOption')
    },
    saveOption () {
      let param = {}
      if (this.modalType === 'add') {
        param = this.formItem
      } else if (this.modalType === 'edit') {
        param = this.formItem
      }
      param.fiels_json = JSON.stringify(this.heardList)
      param.style_json = JSON.stringify(this.formDynamic.items)
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          operationCommonExcel(param).then(ret => {
            let data = ret.data
            if (data.errcode === 200) {
              this.btnLoading = false
              this.success()
              this.$emit('saveOption')
            } else {
              this.btnLoading = false
              this.error(data)
            }
          })
        } else {
          this.$Message.error({
            content: '操作失败,请核对添加信息后重试'
          })
        }
      })
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
  },
  watch: {
    dataObj (val) {
      if (this.$common.xeUtils.isEmpty(val)) {
        this.heardList = []
      }
      this.formItem = val
      if (!this.$common.xeUtils.isEmpty(val.style_json)) {
        this.formDynamic.items = JSON.parse(val.style_json)
      }
      if (!this.$common.xeUtils.isEmpty(val.fiels_json)) {
        this.heardList = JSON.parse(val.fiels_json)
      }
    }
  },
  computed: {}
}
</script>

<style scoped lang="less">
    .search-btn {
        margin-left: 20px;
    }

    .Header {
        margin-top: 40px;
        .field-box{
            padding: 1.5px;
            background-color: #eaeaea;
            margin: 1.5px;
        }
        .field-box-input{
            margin-top: 1px;
        }
        .field-box-card{
            cursor: pointer;
        }
    }
    .Header /deep/ .ivu-card-body{
        padding: 8px;
    }
</style>
